<template>
  <div>

    <van-field
      v-model="name"
      name="名称"
      label="名称"
      placeholder="名称"
      :rules="[{ required: true, message: '请填写名称' }]"
    />
    <van-field
      v-model="description"
      name="描述"
      label="描述"
      placeholder="描述"
    />
    <van-field
      v-model="tname"
      name="讲师"
      label="讲师"
      placeholder="讲师"
    />
    <van-image
      width="100"
      height="100"
      :src="pic"
    />
    图片上传：
    <van-uploader :after-read="afterRead"/>

    视频上传：
    <van-uploader :after-read="afterReadVedio" v-model="fileList" multiple :max-count="3" accept=".mp4"/>
    <br>
    <van-button type="primary" @click='add'>添加</van-button>
  </div>


</template>
<script>


export default {
  data() {
    return {
      name: '',
      description: '',
      tname: '',
      fileList: [],
      pic: '',
      catelist: [],
      cid: 1,
      vedios: []

    }
  },
  methods: {
    //图片上传
    afterRead(file, type = 1) {
      let data = new FormData()
      data.append('id', 1)
      data.append('file', file.file)
      this.axios.post('upload', data).then(res => {
        //视频
        if (type == 2) {
          this.vedios.push(res.data.pic)
        } else {
          this.pic = 'http://localhost:5000/static/' + res.data.pic
        }

      })
    },
    //视频上传
    afterReadVedio() {
      //遍历Filelist
      for (var i = 0; i < this.fileList.length; i++) {
        this.afterRead(this.fileList[i], 2)
      }
    },

    //添加
    add() {
      let data = {
        'name': this.name,
        'description': this.description,
        'tname': this.tname,
        'pic': this.pic,
        'cid': this.cid,
        'vedios': this.vedios
      }
      this.axios.post('courseM', data).then(res => {
        console.log(res)
      })
    }
  },
  mounted() {
  },
}
</script>
<style>

</style>